@use "sass:math";

.box {
  $r: 50;
  $p: 30;
  // (2r)^2 = x^2+(2p)^2
  // x = 2*aqrt(r^2-p^2)
  $x: 2 * math.sqrt($r * $r - $p * $p);
  height: 200px;
  margin: 5px;
  border: 1px solid;
  background-image: radial-gradient(
      #{$r}px at 50% #{$r + $p}px,
      blue 100%,
      transparent 101%
    ),
    radial-gradient(#{$r}px at 50% #{-$p}px, transparent 100%, red 101%);
  background-position: calc(50% - #{$x}px) 0, 50% #{$r}px;
  background-size: #{2 * $x}px 100%, #{2 * $x}px 100%;
  background-repeat: repeat-x, repeat-x;
}
